<template>
	<div class="page-lists">
		<span @click="changePage('leftTen')"><<</span>
		<span @click="changePage('left')"><</span>
		<ul>
			<li v-for="(item,index) in pages" :key="index" v-if="index>leftItem&&index<rightItem" 
				@click="clickPage(item)" :class="{'pageSelect': persentPage === item}">{{item}}</li>
		</ul>
		<span @click="changePage('right')">></span>
		<span @click="changePage('rightTen')">>></span>
		<em>共{{pages}}页</em>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				// persentPage: 1,
				leftItem: -1,
				rightItem: 5
			}
		},
		// 传回第几页共几页
		props: ['persentPage', 'pages'],
		methods: {
			// 当前页数的高亮
			pageLight (gl) {
				if (gl.persentPage > 2 && gl.persentPage < gl.pages-1) {
					gl.leftItem = gl.persentPage -4
					gl.rightItem = gl.persentPage +2
				}else if (gl.persentPage >= gl.pages-1) {
					gl.leftItem = gl.pages-6
					gl.rightItem = gl.pages
				} else if (gl.persentPage <= 2) {
					gl.leftItem = -1
					gl.rightItem = 5
				}
				gl.$emit('pageData',gl.persentPage)
			},
			clickPage (value) {
				var that = this
				that.persentPage = value
				that.pageLight(that)
			},
			changePage (value) {
				var that = this
				if (value === 'left') {
					if (that.persentPage <= 1) {
					  that.persentPage = 1
					} else {
					  that.persentPage -= 1	
					}
					that.pageLight(that)
				} else if (value === 'right') {
					if (that.persentPage >= that.pages) {
						that.persentPage = that.pages
					} else {
						that.persentPage += 1
					}
					that.pageLight(that)
				} else if (value === 'leftTen') {
					if (that.persentPage > 10) {
						that.persentPage -= 10
					}
					that.pageLight(that)
				} else if (value === 'rightTen') {
					if (that.persentPage < that.pages-9) {
						that.persentPage += 10
					}
					that.pageLight(that)
				}
			}
		}
	}
</script>

<style scoped>
	@import '../../../static/components/public/paging.css'
</style>